<template>
    <div class="dialog_box">
        <el-dialog v-model="props.dialogVisible" title="Tips" width="960" :before-close="handleClose">
            <template #header>
                <el-icon class="icon-message">
                    <MessageBox />
                </el-icon>
                <span class="addText">添加商品</span>
            </template>
            <div class="contetn-box">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-position="top">
                    <el-form-item label="配件编号">
                        <el-input v-model="searchForm.number" placeholder="DC7163DT" />
                    </el-form-item>
                    <el-form-item label="配件名称">
                        <el-input v-model="searchForm.name" placeholder="钢铁" />
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" plain @click="handleReset">重置</el-button>
                <el-table :data="tableList" border style="width: 100%" class="mt20"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column prop="name" label="配件名称"></el-table-column>
                    <el-table-column prop="number" label="配件编号"></el-table-column>
                    <el-table-column prop="type" label="车型"></el-table-column>
                    <el-table-column prop="category" label="分类"></el-table-column>
                    <el-table-column prop="stock" label="库存数量"></el-table-column>
                </el-table>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <span style="float: left">已选<span style="color: var(--2dc54a20-btnColor)">{{ 2
                            }}</span>个商品</span>
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="dialogAddCommodity">
                        添加产品
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MessageBox } from '@element-plus/icons-vue';
import type { FormInstance } from 'element-plus'
const props = defineProps({
    dialogVisible: {
        typpe: Boolean,
        require: true,
        default: false,
    }
})
const emits = defineEmits(['closeDialog'])

const searchForm = ref({
    number: '',
    name: ''
})
// 表格数据
const tableList = ref([{
    number: 'DC7163DT',
    name: '钢铁',
    type: '汽车',
    category: '配件',
    stock: 100,
}, {
    number: 'DC7163DT',
    name: '钢铁',
    type: '汽车',
    category: '配件',
    stock: 100,
}, {
    number: 'DC7163DT',
    name: '钢铁',
    type: '汽车',
    category: '配件',
    stock: 100,
}])


const handleSearch = () => { }
const handleReset = () => {

}
const handleClose = () => {
    emits('closeDialog', false)
}
const dialogAddCommodity = () => {
    emits('closeDialog', false)
}
</script>

<style lang="scss" scoped>
.dialog_box {
    .icon-message {
        top: 3px;
    }

    .addText {
        color: white;
        margin-left: 10px;
        top: -5px;
    }

    .contetn-box {
        padding: 20px;

        .el-form-item {
            flex: 1;
        }
    }

    .dialog-footer {
        letter-spacing: 3px;
        padding: 20px 40px;
    }
}
</style>